<template>
    <div id="zheDang"></div>
    <div id="tab">
        <ul>
            <li>
                <router-link to="/">
                    <svg v-if="$route.path!=='/'">
                        <use xlink:href="#icon-fangzi"></use>
                    </svg>
                    <svg v-else>
                        <use xlink:href="#icon-fangzi-copy"></use>
                    </svg>
                    <p>首页</p>
                </router-link>

            </li>
            <li>
                <router-link to="/fenlei-view">
                    <svg v-if="$route.path!=='/fenlei-view'">
                        <use xlink:href="#icon-choutigui"></use>
                    </svg>
                    <svg v-else>
                        <use xlink:href="#icon-choutigui-copy"></use>
                    </svg>
                    <p>分类</p>
                </router-link>

            </li>
            <li>
                <router-link to="/zhidemai-view">
                    <svg v-if="$route.path!=='/zhidemai-view'">
                        <use xlink:href="#icon-goumaijilu"></use>
                    </svg>
                    <svg v-else>
                        <use xlink:href="#icon-goumaijilu-copy"></use>
                    </svg>
                    <p>值得买</p>
                </router-link>

            </li>
            <li>
                <router-link to="/shopcart-view">
                    <svg v-if="$route.path!=='/shopcart-view'">
                        <use xlink:href="#icon-goumai"></use>
                    </svg>
                    <svg v-else>
                        <use xlink:href="#icon-goumai-copy"></use>
                    </svg>
                    <p>购物车</p>
                </router-link>

            </li>
            <li>
                <router-link to="profile-view">
                    <svg v-if="$route.path!=='/profile-view'">
                        <use xlink:href="#icon-geren"></use>
                    </svg>
                    <svg v-else>
                        <use xlink:href="#icon-geren-copy"></use>
                    </svg>
                    <p>个人</p>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "TabBar"
    }
</script>

<style scoped>
    #zheDang{
        width: 100%;
        height: 60px;
    }
    svg{
        width: 30px;
        height: 30px;
        display: block;
        margin: 0 auto;
    }
    #tab{
        width: 100%;
        height: 60px;
        background: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        border-top: 1px solid lightgrey;
    }
    ul{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-around;
    }
    p{
        margin: 0 auto;
    }
    a.router-link-active{
        color: #d81e06;
    }
</style>